<template>
  <div id="techInfor">
    <el-table :data="tableData" :stripe="true" style="width: 100%">
      <el-table-column prop="dataId" label="技术资料编号" align="center">
      </el-table-column>
      <el-table-column
        prop="dataName"
        label="资料名称"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="equipmentModel" label="装备类别" align="center">
      </el-table-column>
      <el-table-column prop="dataDesc" label="专业类别" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
        <i
          class="el-icon-view"
          @click="openDetail(scope.row)"
          style="color: #67c23a; font-size: 20px; margin-right: 10px"
        ></i>
        <i
          class="el-icon-download"
          style="color: #6554c0; font-size: 20px"
          @click="download(scope.row)"
        ></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageBtn"
        :page-size="count"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      count: 5,
      total: 10,
      tableData: [],
    };
  },
  methods: {
    render: function () {
      this.$axios({
        url: "/data/list",
        method:"post",
        params: {
          limit: this.count,
          page: this.page,
        },
      }).then(({ data }) => {
        // console.log(data);
        if (data.code == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败!");
        }
      });
    },
    pageBtn: function (v) {
      this.page = v;
      this.render();
    },
    openDetail: function (row) {
      // 查看详情
      let zlgl_data = row;
      this.$store.state.tjy_vuex.zlgl_data = zlgl_data;
      sessionStorage.setItem("zlglInfo", JSON.stringify(zlgl_data));
      // console.log(sessionStorage.getItem( 'zlglInfo'))
      this.$router.push("/home/Zlgl_detail");
    },
    download(v) {
      this.$axios({
        url: "/download",
        params: {
          fileName: v.fileAddress,
        },
        responseType: "blob",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        /* console.log(res);
        const fileName=res.headers['content-disposition'].split('filename=')[1];
        const response=res.data;
        const r=new FileReader();
        r.onload=()=>{
          try{
            const resData=JSON.parse(this.result);
            if(resData){
              if(resData.error_no===undefined){
                throw new Error('解析成功!')
              }else if(resData.error_no!=='0'){
                Message({
                  message:resData.error_info||'Error',
                  type:'error',
                  duration:5*1000,
                })
              }
            }
          }catch(err){
            if(window.navigator.msSaveOrOpenBlob){
              try{
                const blobObject=new Blob([response]);
                window.navigator.mesSaveOrOpenBlob(blobObject,fileName);
              }catch(e){
                console.log(e);
                reject(e);
              }
              return;
            }
            const url=window.URL.createObjectURL(new Blob([response]));
            const link=document.createElement('a');
            link.style.display='none';
            link.href=url;
            link.setAttribute('download',fileName);
            document.body.appendChild(link);
            link.click();
            console.log(link);
          }
        };
        r.readAsText(response);
        resolve();
      }).catch((error)=>{
        console.log(error);
        Message({
          message:'下载失败！',
          type:'error',
          duration:5*1000,
        });
        reject(error); */
        const link = document.createElement("a");
        try {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          let _fileName = res.headers["content-disposition"]
            .split(";")[1]
            .split("=")[1]; //文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到
          link.style.display = "none"; // 兼容不同浏览器的URL对象
          const url = window.URL || window.webkitURL || window.moxURL;

          link.href = url.createObjectURL(blob);

          link.setAttribute(
            "download",
            _fileName.substring(_fileName.lastIndexOf("_") + 1)
          );
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          url.revokeObjectURL(link.href); //销毁url对象
        } catch (e) {
          console.log("下载的文件出错", e);
        }
      });
    },
  },
  mounted: function () {
    this.render();
  },
};
</script>

<style scoped lang="less">
#techInfor {
  padding-bottom: 50px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
</style>